<!--
 * @description: 功能
 * @author: Yoke
 * @Date: 2024-08-28 21:08:58
-->
<script setup lang="ts">
import upload from "@/components/upload.vue";
import { NavigateNextRound } from '@vicons/material';
import { FormInst, NButton, NForm } from 'naive-ui';
import { inject, provide, reactive, ref, toRefs } from 'vue';
import { rules1, } from "./index.ts";
import UpfSpnPortDemand from './table/UpfSpnPortDemand.vue';
const formRef = ref<FormInst | null>(null)

const state = reactive<{
    model: Partial<any>
}>({
    model: {}
})


const { model: formValue } = toRefs(state)
provide('formValue', state.model)

const steps = inject('steps') as any

const nextStep = () => {
    formRef.value?.validate((errors) => {
        if (!errors) {
            steps.setData({
                step3: state.model
            })
            steps.next()
        }
    })
}


const prevStep = () => {
    steps.prev()
}

</script>
<template>
    <div class="survey-overview">
        <NForm :model="formValue" ref="formRef" :rules="rules1" require-mark-placement="left">
            <n-card title="架式通信设备安装抗震措施" class="mt-4">
                <n-grid x-gap="12" :cols="2">
                    <n-gi>
                        <n-form-item label="措施描述" path="text1">
                            <n-input type="textarea" v-model:value="formValue.text1" placeholder="请输入" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="措施描述图片" path="img1">
                            <upload v-model:value="formValue.img1" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="措施图片描述" path="img1">
                            <n-input type="textarea" v-model:value="formValue.text1" placeholder="请输入" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="措施图片描述图片名称" path="img1">
                            <n-input v-model:value="formValue.text1" placeholder="请输入" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="抗震措施描述" path="img1">
                            <n-input type="textarea" v-model:value="formValue.text1" placeholder="请输入" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="抗震措施描述图片" path="img1">
                            <upload v-model:value="formValue.img1" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="抗震措施描述图片描述" path="img1">
                            <n-input type="textarea" v-model:value="formValue.text1" placeholder="请输入" />
                        </n-form-item>
                    </n-gi>
                </n-grid>
            </n-card>
            <n-card title="本工程网元组网及接口连接方案" class="mt-4">
                <n-grid x-gap="12" :cols="4">
                    <n-gi>
                        <n-form-item label="物理接线图" path="text1">
                            <upload v-model:value="formValue.img1" />
                        </n-form-item>
                    </n-gi>
                </n-grid>
                <n-card title="本工程网元组网及接口连接方案" class="mt-4">
                    <UpfSpnPortDemand v-model:value="formValue.table1" />
                </n-card>
                <n-grid x-gap="12" :cols="2">
                    <n-gi>
                        <n-card title="端口需求规模表描述" class="mt-4">
                            <n-grid x-gap="12" :cols="1">
                                <n-gi>
                                    <n-form-item label="接入方案描述" path="text1">
                                        <n-input type="textarea" v-model:value="formValue.text1" placeholder="请输入" />
                                    </n-form-item>
                                </n-gi>
                            </n-grid>
                        </n-card>
                    </n-gi>
                    <n-gi>
                        <n-card title="传输资源描述" class="mt-4">
                            <n-grid x-gap="12" :cols="1">
                                <n-gi>
                                    <n-form-item label="传输资源情况描述" path="text1">
                                        <n-input type="textarea" v-model:value="formValue.text2" placeholder="请输入" />
                                    </n-form-item>
                                </n-gi>
                            </n-grid>
                        </n-card>
                    </n-gi>
                </n-grid>
            </n-card>
        </NForm>
        <n-space>
            <NButton type="primary" @click="prevStep" class="my-4">
                上一步
                <template #icon>
                    <NIcon class="rotate-180">
                        <NavigateNextRound />
                    </NIcon>
                </template>
            </NButton>
            <NButton type="primary" icon-placement="right" @click="nextStep" class="my-4">
                下一步
                <template #icon>
                    <NIcon>
                        <NavigateNextRound />
                    </NIcon>
                </template>
            </NButton>
        </n-space>
    </div>
</template>